<template>
  <div class="host-wrap">
    <span class="host">预定须知</span>
    <span class="host-text">NOTICE</span>
  </div>
  <div class="host-wrap">
    <span class="host">费用须知</span>
    <span class="host-text">NOTICE</span>
  </div>
  <div class="host-wrap">
    <span class="host">入住须知</span>
    <span class="host-text">NOTICE</span>
  </div>
  <div class="host-wrap">
    <span class="host">价格说明</span>
  </div>
  <div class="text">
    <p class="price-text">
      “划线价格为参考价，该价格指产品/服务的门市价、服务提供者的指导价、零售价、市场价或该产品/服务曾经展示过的销售价等，并非原价；由于产品/服务信息实时更新、服务提供者差异、市场价格波动等原因，该价格可能会与您预订时展示的不一致，仅供您参考。
    </p>
    <p class="price-text">
      未划线价格指产品或服务的实时标价，该价格是在划线价基础上根据服务提供者让利、产品或服务参加活动、或会员使用优惠券的不同而计算出的优惠后的金额。具体成交价格以订单结算页价格为准。
    </p>
  </div>
  <div class="guarantee">
    <div class="guarantee-wrap">
      <div>
        <span class="iconfont icon-anquan"></span>
        <span class="guarantee-title">美团保障</span>
        <span class="guarantee-text">千万保障赔付先行 · 7*24小时贴心客服</span>
      </div>
      <span class="iconfont icon-xiangyou"></span>
    </div>
    <div class="guarantee-wrap">
      <div>
        <span class="iconfont icon-anquan"></span>
        <span class="guarantee-title">美团保障</span>
        <span class="guarantee-text">千万保障赔付先行 · 7*24小时贴心客服</span>
      </div>
      <span class="iconfont icon-xiangyou"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: "orderingDetail",
};
</script>

<script setup></script>
<style scoped>
.host-wrap {
  width: 718px;
  margin: 40px 0 12px 0;
}
.host {
  font-size: 24px;
  color: #252626;
  font-weight: 900;
  position: relative;
}
.host-text {
  position: absolute;
  font-size: 10px;
  margin-left: 4px;
  font-style: italic;
  color: #d0d4d7;
  text-align: top;
  text-transform: uppercase;
  font-weight: 500;
}
.text {
  padding: 12px 8px;
  background-color: #fff;
}
.price-text {
  font-size: 14px;
  color: #7d7e80;
  line-height: 1.6;
}
.guarantee {
  margin-top: 40px;
}
.guarantee-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #f4f6f7;
  padding: 16px 8px;
}
.icon-anquan {
  font-size: 16px;
  color: #ff9b4f;
  margin-right: 5px;
}
.guarantee-title {
  font-size: 14px;
  color: #252626;
  margin-right: 8px;
}
.guarantee-text {
  color: #585a5a;
}
.icon-xiangyou {
  width: 12px;
  height: 12px;
  font-size: 12px;
  color: #fff;
  background-color: #c9c9c9;
  border-radius: 50%;
}
</style>
